<!--上传弹窗-->
<template>
    <el-dialog v-model="gardenForm.show" :title="title" center>
        <el-form ref="formRef" :model="gardenForm.data" :rules="rules" label-width="80px" class="demo-ruleForm">
            <el-form-item label="城市" prop="city">
                <el-input v-model="gardenForm.data.city" />
            </el-form-item>

            <el-form-item label="名称" prop="name">
                <el-input v-model="gardenForm.data.name" />
            </el-form-item>

            <el-form-item label="经纬度" prop="lngLat">
                <el-input v-model="gardenForm.data.lngLat" />
            </el-form-item>

            <el-form-item label="大众" prop="dianpingUrl">
                <el-input v-model="gardenForm.data.dianpingUrl" />
            </el-form-item>

            <el-form-item label="携程" prop="ctripUrl">
                <el-input v-model="gardenForm.data.ctripUrl" />
            </el-form-item>

            <el-form-item label="去哪" prop="qunaerUrl">
                <el-input v-model="gardenForm.data.qunaerUrl" />
            </el-form-item>

            <el-form-item label="同程" prop="tongchengUrl">
                <el-input v-model="gardenForm.data.tongchengUrl" />
            </el-form-item>

            <el-form-item>
                <div class="buttons">
                    <el-button type="primary" @click="commit">提交</el-button>
                </div>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup lang="ts">
import {defineProps, onMounted, reactive, ref} from 'vue'
import {saveOrUpdate}                          from "@/api/garden";
import {ElMessage, FormInstance}               from "element-plus";

const rules = reactive({
    city        : [],
    name        : [],
    dianpingUrl : [
        {pattern: /^https:\/\/www\.dianping\.com\/shop\/([a-zA-Z0-9]+)$/, message: '网址错误', trigger: 'blur'}
    ],
    ctripUrl    : [
        {pattern: /^https:\/\/you.ctrip.com\/sight\/([a-zA-Z0-9]+)\/([a-zA-Z0-9]+).html$/, message: '网址错误', trigger: 'blur'}
    ],
    qunaerUrl   : [
        {pattern: /^https:\/\/piao.qunar.com\/ticket\/detail_([a-zA-Z0-9]+).html$/, message: '网址错误', trigger: 'blur'}
    ],
    tongchengUrl: [
        {pattern: /^https:\/\/www.ly.com\/scenery\/BookSceneryTicket_([a-zA-Z0-9]+).html$/, message: '网址错误', trigger: 'blur'}
    ],

})

const emit = defineEmits(["saveDone"])

const props = defineProps({
    gardenForm: {
        type   : Object,
        default: () => {
            return {
                show: false,
                mode: '',
                data: {},
            }
        }
    }
})

const formRef: any = ref<FormInstance>()

/**
 * 保存
 */
function commit() {
    if (!formRef) {
        return
    }
    formRef.value.validate((valid: any) => {
        if (!valid) {
            ElMessage.error("请检查表单后重新提交")
            return
        }
        else {
            saveOrUpdate(props.gardenForm.data).then((res: any) => {
                if (res?.code === 200) {
                    ElMessage.success("成功")
                }
                else {
                    ElMessage.error(res?.data)
                }
            }).finally(() => {
                props.gardenForm.show = false
                emit("saveDone")
            })
        }
    })
}

const title = ref()

onMounted(() => {
    if (props.gardenForm.mode === "add") {
        title.value = "新增"
    }
    else if (props.gardenForm.mode === "edit") {
        title.value = "编辑"
    }
})
</script>

<style lang="scss" scoped>
.buttons {
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: end;
}
</style>
